<!DOCTYPE HTML>
<html>
<head>
    <!--BEGIN HEAD MATE-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="initial-scale=1.0,width=device-width"/>

    <meta name="version" content="1.0.0">
    <!--END HEAD MATE-->

    <!--BEGIN HEAD LINK SHORTCUT ICON-->
    <link rel="shortcut icon" href="images/icon/zhihuawei_favicon32x32.ico">
    <!--END HEAD LINK SHORTCUT ICON-->

    <!--BEGIN HEAD LINK STYLE-->
    <!--BASE STYLE CSS-->
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
    <!--PRODUCTION PHOTO CSS-->
    <link rel="stylesheet" href="css/productionPhoto.css" type="text/css" media="screen"/>
    <!--PRINT CSS-->
    <link rel="stylesheet" href="css/print.css" type="text/css" media="print"/>
    <!--END HEAD LINK STYLE-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--BEGIN HEAD TITLE-->
    <title>提交图片</title>
    <!--END HEAD TITLE-->
    <style>
 
        #login_click{ margin-top:32px; height:40px;}
        #login_click a 
        {
            
         
            text-decoration:none;
            background:#2f435e;
            color:#f2f2f2;
            
            padding: 10px 30px 10px 30px;
            font-size:16px;
            font-family: 微软雅黑,宋体,Arial,Helvetica,Verdana,sans-serif;
            font-weight:bold;
            border-radius:3px;
            
            -webkit-transition:all linear 0.30s;
            -moz-transition:all linear 0.30s;
            transition:all linear 0.30s;
            
            }
           #login_click a:hover { background:#385f9e; }
         
           #drop{
   width: 300px;
   height: 300px;
   border: 1px solid gray;
   line-height:300px;
   text-align: center;
   
 }
 .imgs{
   display: flex;
   /* overflow: hidden; */
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
 }
 .imgs img{
   width: 25%;
   float: left;
 }
 .imgs>div{
    overflow: hidden;
    float: left;
 }
 .imgs>div>div{
    text-indent: 20px;
    padding: 10px;
    font-family:"黑体";  /*设置字体*/
	line-height: 30px;

 }

        </style>
</head>
<body>



<!--BEGIN WRAPPER-->
<div id="wrapper">


    <div id="drop">
        请把图片拖至于此
    </div>
    <div class="imgs">

    </div>


    <div id="login_click" style="text-align: center;">
        <a id="btlogin" href="#" >上 传</a>
    </div>

</div>

<script src="js/jquery.js"></script>
<script src="js/projectPhoto.js"></script>
<script src="js/backPosition.js"></script>

<script src="js/custom.js"></script>

<script src="./js/request.js"></script>
		<!-- <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> -->
<script type="text/javascript">

    let dropBox=document.querySelector('#drop');
    let imgsElem=document.querySelector('.imgs');
    var FILES=new Array();

    dropBox.addEventListener('dragover',function(e){
    e.stopPropagation();
    e.preventDefault();
    })

    dropBox.addEventListener('drop',function(e){
    e.stopPropagation();
    e.preventDefault();
    let dataTransfer=e.dataTransfer;
    let files=dataTransfer.files;
    handleFiles(files)
    })


    function handleFiles(files){
            console.log(files);
        for(let file of files){
            if(/^image\//.test(file.type)){
           FILES.push(file);
            //console.log(FILES);
            let level = document.createElement('div');
        
            let img = document.createElement('img');
            let text = document.createElement('div');
            let nameDiv = document.createElement('div');
            let typeDiv = document.createElement('div');
            let sizeDiv = document.createElement('div');
            let lastModifiedDiv = document.createElement('div');
            
            nameDiv.innerText = "文件名: " + file.name;
            typeDiv.innerText = "文件类型: " + file.type;
            sizeDiv.innerText = "文件大小: " + (file.size/1024.0/1024.0) +" KB";
            lastModifiedDiv.innerText = "上次修改时间: " + showDate(new Date(file.lastModified));
            text.appendChild(nameDiv);
            text.appendChild(typeDiv);
            text.appendChild(sizeDiv);
            text.appendChild(lastModifiedDiv);
            level.appendChild(img);
            level.appendChild(text);

            
            imgsElem.appendChild(level);
            img.file=file;
            let reader=new FileReader();
            reader.onload=function(){
                img.src=reader.result;
            }
            reader.readAsDataURL(file)
            }

        }
    }
    const baseUrl = "http:localhost:9000"

    $("#btlogin").click(function(){
        console.log(1)
		var formData = new FormData();
		if(FILES.length==0){		//没有上传图片
			return;
		}else{
            console.log(2)
			for(var i=0;i<FILES.length;i++){
				formData.append("file",FILES[i]);
			}
			$.ajax({
	        url:baseUrl+'/user/upload',
	        dataType:'json',
	        type:'post',
	        async: false,
	        data:formData,
	        processData:false,
	        contentType: false,
	        success:function(data){
                console.log(data)
	            // if(data.code==1){
	            // 	$(".imageDiv").remove();
	            // 	FILES=[];	
	            // 	getfile();
	            // }else{
	            // 	console.log('上传失败！')
	            // }
	        }
	    })
		}
	})

    function showDate(date) {
    //if (str == '/Date(-62135596800000)/') return '';
    var date = date
	Y = date.getFullYear() + '-';
  M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth()    + 1) + '-';
  D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
  h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
  m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
  s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds()); 
    return Y + M + D + h + m + s;
}

    // var vm=new Vue({
    //     el:'#wrapper',
    //     data:{
    //         ids: [],
    //         resumeId: "",
    //         userId: "",
    //         userName: "",
    //         name: "",
    //         age: "",
    //         sex: "",
    //         telephone: "",
    //         qq: "",
    //         email: "",
    //         workingPlace: "",
    //         introduction: "",
    //         skill: "",
    //         through: "",
    //         education:"",
    //         experience: "",
    //         honor: "",
    //         resume: {}
    //     },
    //     methods:{
    //         dragoverEvent(e){
    //             e.stopPropagation();
    //             e.preventDefault();
    //         },
    //         dropEvent(e){
    //             e.stopPropagation();
    //             e.preventDefault();
    //             let dataTransfer=e.dataTransfer;
    //             let files=dataTransfer.files;
                
    //             for(let file of files){
    //                 if(/^image\//.test(file.type)){
    //                 let img=document.createElement('img');
    //                 imgsElem.appendChild(img);
    //                 img.file=file;
    //                 let reader=new FileReader();
    //                 reader.onload=function(){
    //                     img.src=reader.result;
    //                 }
    //                 reader.readAsDataURL(file)
    //                 }
    //             }
    //         },
    //         callbackResume(e) {
    //             if (e.flag && e.data != null && e.code == 20000) {
    //                 this.resume = e.data
                
    //             } else {
    //                 window.alert(e.message)
    //             }
    //         },
    //         resumeClick() {
    //             console.log(1)
    //             resume = {}
                
    //             resume["userId"] = localStorage.userId
    //             resume["userName"] = localStorage.userName

            
    //             if (this.name  != "") {
    //                 resume["name"] = this.name
    //             }
    //             if (this.age != "") {
    //                 resume["age"] = this.age
    //             }
    //             if (this.sex != "") {
    //                 resume["sex"] = this.sex
    //             }
    //             if (this.telephone != "") {
    //                 resume["telephone"] = this.telephone
    //             }
    //             if (this.qq != "") {
    //                 resume["qq"] = this.qq
    //             }
    //             if (this.email != "") {
    //                 resume["email"] = this.email
    //             }
    //             if (this.email != "") {
    //                 resume["email"] = this.email
    //             }
    //             if (this.workingPlace != "") {
    //                 resume["workingPlace"] = this.workingPlace
    //             }
    //             if (this.introduction != "") {
    //                 resume["introduction"] = this.introduction
    //             }
    //             if (this.skill != "") {
    //                 resume["skill"] = this.skill
    //             }
    //             if (this.through != "") {
    //                 resume["through"] = this.through
    //             }
    //             if (this.education!= "") {
    //                 resume["education"] = this.education
    //             }
    //             if (this.honor!= "") {
    //                 resume["honor"] = this.honor
    //             }
    //             if (this.experience!= "") {
    //                 resume["experience"] = this.experience
    //             }
              
    //             // 异步回调
    //             updateResume(resume , this.callbackResume)
    //         }
    //     }
    // })
</script>
</body>
</html>